<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>营销分析-更多分析</title>
	<link rel="stylesheet" href="css/daterangepicker.css">
	<link rel="stylesheet" href="css/style.css">

	<!--<script type="text/javascript" src="js/jquery.js"></script>-->
	<!--<script type="text/javascript" src="js/moment.min.js"></script>-->
	<!--<script type="text/javascript" src="js/jquery.daterangepicker.js"></script>-->
	<!--<script type="text/javascript" src="js/highchart.js"></script>-->
	<!--<script type="text/javascript" src="js/grid.js"></script>-->
	<!--<script type="text/javascript" src="js/common.js"></script>-->
	<!--<script type="text/javascript" src="js/exporting.js"></script>-->
	<!--<script type="text/javascript" src="js/data.js"></script>-->

	<!--<script type="text/javascript" src="build.js"></script>-->

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/highcharts-5.0.12.js"></script>
  <!--<script type="text/javascript" src="js/highchart.js"></script>-->
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript" src="js/data.js"></script>
  <script type="text/javascript" src="js/table/jquery.table2excel.js"></script>
  <!--<script type="text/javascript" src="js/table/table2excel.js"></script>-->

	<style>
		.search-area .date{margin-left: 0;}
		.search-area .date .searchBox{text-indent: 5px;text-align: left;color: #666;margin-left: 20px;font-size: 12px;}
		.searchBox::-webkit-input-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox::-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-ms-input-placeholder { color:#666;font-family: "微软雅黑";}
    .more-tabs>li>div{
      overflow-y: scroll;
      position: absolute;
      top:50px;
      left: 0%;
      padding: 20px;
      height: 450px;
      width: 94%;
    }
    .sexAgeBox{
      height: 275px;
    }
    .more-tabs>li>div>div{
      margin-bottom: 10px;
      box-sizing: content-box;
      border: 1px solid #ccc0da;
      margin-top: 0px !important;
    }
    .more-tabs>li>div>div:nth-child(2){
      height: 360px;
    }
    .image-analysis>div {
      position: relative;
    }
    .image-analysis p{
      position: absolute;
      left: -20px;
      top: 0px;
      width: 220px;
      z-index: 2;
      word-wrap: break-word;
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #4dbbea;
      color: #fff;
      margin-top: 10px;
      margin-left: -10px;
      display: inline-block;
    }
    #inSexAgeContainer{
      padding-top: 2px;
      height: 95% !important;
      float: left;
    }
    .tablediv{
      display: inline-block;
      vertical-align: top;
    }
    .inSexAgeTableBox{
      float: right;
      margin-right: 50px;

    }
    #datatable, #datatable2 {
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
    }
    .table{
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
    }
    #datatable2{
      margin-right: 20px;
    }
    #datatable2  td, #datatable2 th{
      padding: 0px 3px;
    }
    td,th {
      line-height: 25px;
      border: 1px solid #ccc;
      padding: 0px 17px;
      text-align: center;
    }
    #container{
      padding-top: 2px;
      height: 98% !important;
      width: 54%;
      float: left;
    }
    #export{
      overflow: hidden;
      font-size: 15px;
      line-height: 18px;
      color: #4dbbea;;
    }
    #table{
      font-size: 15px;
    }
    thead th{
      background-color: #f0f0f0;
    }
    
     .loading{
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 9;
      transform: translate3d(-50%, -50%, 0);
      height: 120px;
    }
	</style>
</head>
<body>
  
	<div class="moreBox">
    
    <!--遮罩层-->
    <div id="make-lightbox" style="position: fixed; left: 0px; top: 0px; width: 10000px; height: 10000px; background-color: rgb(255, 255, 255); opacity: 0.8; "></div>
    <div class="more-warp">
      <h6 class="x" >X</h6>
      <ul class="more-tabs">
        <li class="imageLi active">活动用户画像分析
          <!--用户图表分析-->
          <div class="image-analysis show-area">
            <!--注册用户性别年龄段分布-->
            <!--<div class="box sexAgeBox">-->
              <!--<div class="opespan">-->
                <!--<p class="">注册用户性别年龄段分布</p>-->
              <!--</div>-->
              <!--<div id="regSexAgeContainer"></div>-->
              <!--<div class="regSexAgeTableBox" ></div>-->
            <!--</div>-->

            <!--投资用户性别年龄段分布-->
            <div class="box sexAgeBox">
              <div class="opespan">
                <p class="">投资用户性别年龄段分布</p>
              </div>
              <div id="inSexAgeContainer"></div>
              <div class="inSexAgeTableBox" ></div>
            </div>

            <!--投资金额区间分布-->
            <div class="InvestmentMoney">
              <p>投资金额区间分布</p>
              <div id="container" style="min-width:400px;height:400px"></div>
              <!--<button  id="export">导出数据↓</button>-->
              <table id="datatable2"></table>
            </div>
          </div>
        </li>
        <li class="investmentLi">活动用户投资分析
          <!--用户投资分析-->
          <div id="investmentUser " class="hide">
            <div class=" investment-analysis " id="userIn"></div>
            <div class="investment-analysis " id="repeatUserIn"></div>

          </div>

        </li>
      </ul>
    </div>
	</div>
 
 .loading{
  
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  height: 120px;
}
</body>

<script>
   /**
   * 请求网络加载动画
   * @param {jQuery对象} objDiv  "#id" 装载在那个div元素里面的动画
   * @param imgDiv  动画名  方便关闭时控制
   */
  function loadingImg(objDiv, imgDiv){
    var divWrap = '<div class="'+ imgDiv +'" style=" position: absolute; left: 0%; top: 0% width: 100%; height: 100%; background: #ececec; opacity: 0.8">'
    divWrap += '<img  src="./images/loadingIn.gif" style="position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); height: 120px;"  alt="加载动画"></div>'
    $(objDiv).append(divWrap)
    
  }

   /**
   * 请求结束关闭动画
   * @param {String} imgDiv  关闭动画名
   * @param imgDiv  控制关闭的动画名 
   */
  function loadingImgForClose(imgDiv){
    $(('.'+imgDiv)).fadeOut() 
  }

  $(function(){
//    let aa = $('body', window.top.document)
    let aa = window.top.location.href
    console.log('---->'+aa)


    let dataC = $('#iframeBox', window.parent.document).attr('data-c')
    

    $('.x').click(function () {
      $(window.parent.close())
    })
    loadingImg('.sexAgeBox', 'tt')
		setTimeout(()=>{
      // loadingImgForClose('tt')
      ajax()
    }, 2000)
    // 请求
		function ajax(){
			$.ajax({
				type : "GET",  //请求方式
	//      url : "/jinr-bi-web/activity/selectActivityUserImageInvestmentAnalyze",  //请求路径
				url : "./json/b.json",  //请求路径
				data : getRequest(dataC),
				success : function(msg) {
					var sexAgeDistribution = msg.sexAgeDistribution
					var activityUserInvestAnalyze = msg.activityUserInvestAnalyze
					var investMoneyIntervalDistribution = msg.investMoneyIntervalDistribution

					// 投资用户性别年龄段分布
					sexAgeDistributionHighchartsToTable('#inSexAgeContainer',sexAgeDistribution);

					// 投资金额区间分布
					investMoneyIntervalDistributionHighchartsToTable('#datatable2', investMoneyIntervalDistribution);

					// 活动用户投资分析
					createTableActiveUserInvestAnalyze(activityUserInvestAnalyze);
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					//alert(textStatus);
					//alert("失败了"+errorThrown)
				}
			});
		}



    // 切换
    $('ul.more-tabs li').click(function () {
      $('ul.more-tabs li').removeClass('active').children('div').removeClass('hide')

      $(this).addClass('active').siblings().children('div').addClass('hide')
    })


  });


  /**
   * 投资金额区间分布
   * 将Highcharts图表数据生成Table表格
   * @param div  统计图表的div的Id
   * @param table  要生成表格的div的Id
   * @param dataArr  数据
   */
  function investMoneyIntervalDistributionHighchartsToTable(tableDiv,dataArr) {
    let moneyRangeArr = []
    let investUsersArr = []
    let avgInvestMoneysArr= []
    let repeatInvestUsersArr = []
    let avgRepeatInvestMoneyArr = []
    var table;
      table += '<thead>'
          table += '<tr>'
            table += '<th rowspan="2">投资金额区间</th>'
            table += '<th>投资人数</th>'
            table += '<th>人均投资金额</th>'
            table += '<th>复投人数</th>'
            table += '<th>人均复投金额</th>'
          table += '</tr>'
        table += '</thead><tbody>'

    dataArr.forEach(function(ele,index){
      // 组装图像数据
      moneyRangeArr.push(ele.moneyRange)
      investUsersArr.push(ele.investUsers)
      avgInvestMoneysArr.push(parseInt(ele.avgInvestMoneys))
      repeatInvestUsersArr.push(ele.repeatInvestUsers)
      avgRepeatInvestMoneyArr.push(parseInt(ele.avgRepeatInvestMoney))

        table += '<tr>'
            table += '<td >' + ele.moneyRange + '</td>'
            table += '<td>' + ele.investUsers + '</td>'
            table += '<td>' + formatCurrency(ele.avgInvestMoneys) + '</td>'
            table += '<td>' + ele.repeatInvestUsers + '</td>'
            table += '<td>' + formatCurrency(ele.avgRepeatInvestMoney) + '</td>'
          table += '</tr>'
      });
      table += '</tbody>'
      $(tableDiv).html(table)
      var sex = {
        chart: {
          zoomType: 'xy'
        },
        colors: ['#418FBD', '#50B432', '#ED561B', '#DDDF00', '#3D96AE',
          '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
        title: {
          text: ''
        },
        legend: {
          align: 'right', //水平方向位置
          verticalAlign: 'top', //垂直方向位置
        },
        xAxis: [{
          categories: moneyRangeArr,
          crosshair: true
        }],

        yAxis: [
          {
            title: {
              text: '',
              rotation: 0
            },
            opposite: true

          },
          {
              title: {
              text: '',
                rotation: 0
            }
          },
          {
            title: {
              text: '',
              rotation: 0
            },

          },
          {
            title: {
              text: '',
                rotation: 0
            }
          },
        ],
        legend: {
          align: 'right', //水平方向位置
          verticalAlign: 'top', //垂直方向位置
          y:30
        },
        plotOptions: {
          column: {
            pointPadding: 0,
            borderWidth: 0
          }
        },
        tooltip: {
          shared: true
//            formatter: function () {
//              return '<b>' + this.series.name + '</b><br/>' +
//                this.point.y + ' 个' + this.point.name.toLowerCase()+ '</b><br/>';
//            }
        },
        series: [
          {
            name: '投资人数',
            type: 'column',
            yAxis: 1,
            data: investUsersArr,
            tooltip: {
              valueSuffix: ' 人'
            }
          },
          {
            name: '复投人数',
            type: 'column',
            yAxis: 1,
            data: repeatInvestUsersArr,
            tooltip: {
              valueSuffix: ' 人'
            }
          },
          {
            name: '人均投资金额',
            type: 'line',
            data: avgInvestMoneysArr,
            tooltip: {
              valueSuffix: ' 元'
            }
          },
          {
            name: '人均复投金额',
            type: 'line',
            data: avgRepeatInvestMoneyArr,
            tooltip: {
              valueSuffix: ' 元'
            }
          },
        ]
      }
      // 投资笔数性别年龄分布
      $('#container').highcharts(sex);
  }


  /**
   * 创建活动用户投资分析表格
   * @param {Array}
   * @param {Array} tbodyArr
   */
  function createTableActiveUserInvestAnalyze(tbodyArr) {
  console.log(tbodyArr)
    var _table, _repeatTable;
    _table = '<table id="table">'
      _table += '<thead>'
        _table += '<tr>'
          _table += '<th colspan="6" align="center">新增首投人数:' + tbodyArr[0].investUser + '人</th>'
          _table += '<th colspan="6" align="center">有效新增首投人数:' + tbodyArr[1].investUser + '人</th>'
        _table += '</tr>'
        _table += '<tr>'
          _table += '<th rowspan="2" colspan="1">人均投资额</th>'
          _table += '<th colspan="5" align="center">首投金额</th>'
          _table += '<th rowspan="2" colspan="1">人均投资额</th>'
          _table += '<th colspan="5" align="center">有效新增首投金额</th>'
      _table += '</tr>'
        _table += '<tr>'
          _table += '<th>活期</th>'
          _table += '<th>定期1年</th>'
          _table += '<th>保险箱</th>'
          _table += '<th>日增息</th>'
          _table += '<th>总金额</th>'
          _table += '<th>活期</th>'
          _table += '<th>定期1年</th>'
          _table += '<th>保险箱</th>'
          _table += '<th>日增息</th>'
          _table += '<th>总金额</th>'
        _table += '</tr>'
      _table += '</thead><tbody>'
        _table += '<tr>'
          _table += '<td>' + formatCurrency(tbodyArr[0].avgInvestMoney) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[0].curInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[0].fixInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[0].safeInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[0].dailyInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[0].sumMoney) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].avgInvestMoney) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].curInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].fixInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].safeInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].dailyInvest) + '</td>'
          _table += '<td>' + formatCurrency(tbodyArr[1].sumMoney) + '</td>'
        _table += '</tr>'

    _table += '</tbody></table>'

    $('#userIn').html(_table)

    _repeatTable = '<table id="repeatTable">'
    _repeatTable += '<thead>'
    _repeatTable += '<tr>'
      _repeatTable += '<th colspan="6" align="center">新增首投人数:' + tbodyArr[2].investUser + '人</th>'
      _repeatTable += '<th colspan="6" align="center">有效新增首投人数:' + tbodyArr[3].investUser + '人</th>'
    _repeatTable += '</tr>'
    _repeatTable += '<tr>'
      _repeatTable += '<th rowspan="2" colspan="1">人均投资额</th>'
      _repeatTable += '<th colspan="5" align="center">首投金额</th>'
      _repeatTable += '<th rowspan="2" colspan="1">人均投资额</th>'
      _repeatTable += '<th colspan="5" align="center">有效新增首投金额</th>'
    _repeatTable += '</tr>'
    _repeatTable += '<tr>'
      _repeatTable += '<th>活期</th>'
      _repeatTable += '<th>定期1年</th>'
      _repeatTable += '<th>保险箱</th>'
      _repeatTable += '<th>日增息</th>'
    _repeatTable +=  '<th>总金额</th>'
      _repeatTable += '<th>活期</th>'
      _repeatTable += '<th>定期1年</th>'
      _repeatTable += '<th>保险箱</th>'
      _repeatTable += '<th>日增息</th>'
      _repeatTable += '<th>总金额</th>'
    _repeatTable += '</tr>'
  _repeatTable += '</thead><tbody>'
    _repeatTable += '<tr>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].avgInvestMoney) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].curInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].fixInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].safeInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].dailyInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[2].sumMoney) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[3].avgInvestMoney) + '</td>'
    	_repeatTable += '<td>' + formatCurrency(tbodyArr[3].curInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[3].fixInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[3].safeInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[3].dailyInvest) + '</td>'
      _repeatTable += '<td>' + formatCurrency(tbodyArr[3].sumMoney) + '</td>'
    _repeatTable += '</tr>'
  _repeatTable += '</tbody></table>'


    $('#repeatUserIn').html(_repeatTable)
  }


  /**
   * 创建表格-活动用户性别年龄
   * @param {Array}
   * @param {Array} tbodyArr
   */
  function sexAgeDistributionHighchartsToTable(tableDiv, tbodyArr) {
    var _table;
    _table = '<table id="datatable">'
      _table += '<thead>'
      _table += '<tr>'
        _table += '<th>年龄段</th>'
        _table += '<th>男性</th>'
        _table += '<th>女性</th>'
        _table += '<th>合计</th>'
      _table += '</tr>'
    _table += '</thead><tbody>'
    tbodyArr.forEach(function(ele,index){
      _table += '<tr>'
        _table += '<th>' + ele.ages + '</th>'
        _table += '<td>' + ele.sexMen + '</td>'
        _table += '<td>' + ele.sexWomen + '</td>'
        _table += '<td>' + ele.sumMenWomenByAges + '</td>'
      _table += '</tr>'
    })

    _table += '</tbody></table>'

    $('.inSexAgeTableBox').html(_table)

    $(tableDiv).highcharts({
      data: {
        table: 'datatable'
      },
      chart: {
        type: 'column',
        events: {
          load: function () {
            this.series[2].remove()
          }
        }
      },
      colors: ['#418FBD', '#50B432', '#ED561B', '#DDDF00', '#3D96AE',
        '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
      title: {
        text: ''
      },
      legend: {
        align: 'right', //水平方向位置
        verticalAlign: 'top', //垂直方向位置
      },
      xAxis: {
        crosshair: true
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: '元',
          rotation: 0
        }
      },
      plotOptions: {
        column: {
          pointPadding: 0,
          borderWidth: 0
        }
      },
      tooltip: {
        shared: true
      }
    });
  }

  // 解析参数
  function getRequest(data) {
    var theRequest = new Object();
    var strs = data.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
    }

    return theRequest;
  }
</script>
</html>
